<template>
    <div id="box">
        <transition appear tag="div">
            <div id="container">
                <el-row type="flex" justify="space-around" style="color: white;">
                    <el-col :div="4">
                        <router-link class="routerLink" to="#/" tag="div" style="background: #FFC014;">
                            <i class="icon iconfont icon-daishu"></i>
                        </router-link>
                        <span>
                            外卖
                        </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#FF8204">
                            <i class="icon iconfont icon-meishi""></i>
                  </router-link>
                  <span>
                    美食
                </span>
                </el-col>
                <el-col :div=" 4">
                    <router-link class="routerLink" to="" tag="div" style="background:#A15B33">
                        <i class="icon iconfont icon-hotel"></i>
                    </router-link>
                    <span>
                        酒店住宿
                    </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#0BC091">
                            <i class="icon iconfont icon-hongjiu"></i>
                        </router-link>
                        <span>
                            休闲/玩乐
                        </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#FD3C16">
                            <i class="icon iconfont icon-dianying"></i>
                        </router-link>
                        <span>
                            电影/演出
                        </span>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="space-around" style="margin-top: 10px;">
                    <el-col :div="4">
                        <router-link class="routerLink" to="#/" tag="div" style="background: #20B1F3;">
                            <i class="icon iconfont icon-dache"></i>
                        </router-link>
                        <span>
                            打车
                        </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#FF4886">
                            <i class="icon iconfont icon-meifa"></i>
                        </router-link>
                        <span>
                            丽人/美发
                        </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#FFBF21">
                            <i class="icon iconfont icon-paobu" ></i>
                        </router-link>
                        <span>
                            跑腿代购
                        </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#1FAFF6">
                            <i class="icon iconfont icon-huoche"></i>
                        </router-link>
                        <span>
                            火车票/机票
                        </span>
                    </el-col>
                    <el-col :div="4">
                        <router-link class="routerLink" to="" tag="div" style="background:#FF8811">
                            <i class="icon iconfont icon-ziyuan"></i>
                        </router-link>
                        <span>
                            更多
                        </span>
                    </el-col>
                </el-row>
            </div>
        </transition>
    </div>
</template>
<script>
    export default {

    }
</script>
<style lang='less' scoped>
    #box {
        display: flex;
        justify-content: center;
        background: url('http://127.0.0.1:3000/static/img/nav/bg.png');
        background-position-y: -30px;
        height: 220px;
    }
    /* v-enter 【进入之前，元素的起始状态】 */
    /* v-leave-to 【动画离开之后，离开的终止状态】 */
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }
    #container {
        padding-top: 10px;
        border-radius: 20px;
        width: 95%;
        background-color: white;
    }

    .el-row {
        text-align: center;

        .icon {
            font-size: 30px;
            color:white;
        }

        .el-col {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            div {
                display: flex;
                align-items: center;
                justify-content: center;
                background:white;
                width: 60px;
                height: 60px;
                border-radius: 20px;
                margin: 5px 0;
            }
            span {
                color: black;
                font-size: 13px;
            }
        }
    }
</style>